<p>
  <%#*<label for="expertise_list">%>
  <b>A comma seperated list of keywords that describe your expertise.<br/>Please let the suggestions guide you, but feel free to add your own if necessary.</b>
  <%#= help_icon("A comma seperated list of keywords that describe your expertise.<br/>Please let the suggestions guide you, but feel free to add your own if necessary.") -%>
  <%#*</label>%>

  <br/>
  <br/>
  <div id="facebook" class="clearfix">
    <div tabindex="-1" id="expertise_ids" class="clearfix tokenizer" onclick="$('expertise_autocomplete_input').focus();">
      <span class="tokenizer_stretcher">^_^</span>
      <span class="tab_stop"><input type="text" id="expertise_hidden_input" tabindex="-1" ></span>

      <div id="expertise_autocomplete_display" class="tokenizer_input">
        <input type="text" size="1" tabindex="" id="expertise_autocomplete_input" />
      </div>
    </div>
    <div id="expertise_autocomplete_populate" class="clearfix autocomplete typeahead_list" style="width: 600px; height: auto; overflow-y: hidden;display:none">
      <div class="typeahead_message">Type the areas you have expertise in</div>
    </div>
  </div>


  <%#*<p style="font-size: 93%; margin-bottom: 0.2em; padding: 0 inherit; text-align: right; vertical-align: middle;">%>
    <%#= link_to_function "View suggestions" + expand_image("0.3em"), visual_effect(:toggle_blind, "expertise_tag_suggestions", :duration => 0.4) %>
  <%#*</p>%>
  <br/>
  <div class="fold">
  <div class="foldTitle">Suggestions</div>
  <div class="foldContent">

  <div id="expertise_tag_suggestions" style="font-size: 93%; color: #333333;  text-align: center; margin-top: 0.5em; padding: 0.3em;">
    <div id="expertise_select_tags" class="hTagcloud">
      <div class="popularity">
        <% unless @tags_expertise.blank? -%>
          <%#*<b>|</b>%>
          <% tag_cloud @tags_expertise, %w(popular v-popular vv-popular vvv-popular vvvv-popular) do |tag, css_class| -%>
            <%= link_to tag.name, "javascript:addExpertiseListTag(#{tag.id});", :class => css_class -%>
            <%#*<b>|</b>%>
            <% unless tag==@tags_expertise.last %>
            |
          <% end %>
          <% end -%>
        <% end -%>
      </div>
    </div>
  </div>

  </div>
  </div>
</p>

<script type="text/javascript">
  var expertise_list = <%= @all_expertise_as_json -%>;
  var prepopulate_with = <%= @expertise_autocompleter_selected_ids && !@expertise_autocompleter_selected_ids.empty?  ? @expertise_autocompleter_selected_ids.to_json : @person.expertise.sort{|a,b| a.id<=>b.id}.collect{|t| t.id}.to_json -%>;
  var expertise_autocompleter_id='expertise_autocompleter'
  var expertise_autocompleter = new Autocompleter.LocalAdvanced(
  expertise_autocompleter_id, 'expertise_autocomplete_input', 'expertise_autocomplete_display', 'expertise_autocomplete_populate', expertise_list, prepopulate_with, {
    frequency: 0.1,
    updateElement: addAction,
    search_field: "name",
    id_field: "id",
    validation_type: "any"
  });
  var hidden_input = new HiddenInput('expertise_hidden_input',expertise_autocompleter);

  autocompleters[expertise_autocompleter_id] = expertise_autocompleter;
 var remember_expertise_list = <%= @expertise_autocompleter_unrecognized_items ? @expertise_autocompleter_unrecognized_items.to_json : '[]' -%>;
remember_expertise_list.each(function(item) {
  expertise_autocompleter.addUnrecognizedItemToList(item);
});

</script>